<template>
  <!-- 确认框 -->
  <el-dialog
    v-model="props.visible"
    width="600px"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
        >
          {{ title || t('tips') }}
        </h4>
        <img
          src="@/assets/img/icon_guanbi.png"
          @click="close"
          class="close"
        />
      </div>
    </template>

    <slot>
      <div class="flexcc">{{ text }}</div>
    </slot>

    <template
      v-if="!hideFooter"
      #footer
    >
      <div class="dialog-footer flexcc">
        <el-button
          v-if="!hideCancelbtn"
          color="#252628"
          plain
          @click="cancel"
        >
          {{ cancelText || t('cancelText') }}
        </el-button>
        <el-button
          type="primary"
          color="#252628"
          @click="confirm"
        >
          {{ confirmText || t('confirmText') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  text: {
    type: String,
    default: ''
  },
  cancelText: {
    type: String,
    default: ''
  },
  confirmText: {
    type: String,
    default: ''
  },
  hideFooter: {
    type: Boolean,
    default: false
  },
  hideCancelbtn: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close', 'cancel', 'confirm'])

const handleClose = () => {
  emit('close')
}

// 取消
const cancel = () => {
  emit('cancel')
}

// 确定
const confirm = () => {
  emit('confirm')
}
</script>

<style scoped lang="scss"></style>
